<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滑块拖拽认证</title>
    <style>
        * {
            padding: 0px;
            margin: 0;
        }

        h3 {
            text-align: center;
            margin-top: 250px;
            color: #666;
            letter-spacing: 3px;
        }

        body {
            background-image: url('images/timg.jpg')
        }

        .authentication {
            position: relative;
            width: 300px;
            height: 40px;
            color: #666;
            background-color: rgba(232,232,232, .8);
            margin: 80px auto;
            text-align: center;
            line-height: 40px;

            -moz-user-select: none;
            /*火狐*/
            -webkit-user-select: none;
            /*webkit浏览器*/
            -ms-user-select: none;
            /*IE10*/
            -khtml-user-select: none;
            /*早期浏览器*/
            user-select: none;
        }

        .bg {
            position: absolute;
            width: 0;
            height: 100%;
            z-index: 999;
            background-color: rgba(58, 194, 60, .9);
        }

        .rect {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .slide {
            /* 
        box-sizing: border-box; 怪异盒模型，渲染结果会自动把渲染.slide宽度
        设置为width/height属性的值送去border的值
        */
            position: absolute;
            background-color: white;
            top: 0;
            left: 0;
            width: 43px;
            height: 38px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <h3>滑块拖拽认证</h3>

    <div class="authentication">
        <div class="bg"></div>
        <div class="rect">
            <p>向右拖动认证</p>
            <div class="slide"><img src="images/right.png" alt=""></div>
        </div>
    </div>
    <script>
        /*
        1 获取到slide元素
        2 给slide元素添加按下事件onmousedown
        3 拖动元素事件onmousemove
        4 如何获取鼠标坐标x,y
        5 改变left值
        6 拖动添加绿色背景,怒色背景宽度跟着滑块走
        7 
        */
        var domSlide = document.querySelector('.slide');
        var domBg = document.querySelector('.bg');
        var domRect = document.querySelector('.rect');
        var domTextInfo = document.querySelector('.rect p');
        var domImg = document.querySelector('.slide img');
        var _moveX = 0;
        domSlide.onmousedown = function (e) {
            var initX = e.clientX; //保存初始点击时，鼠标X坐标
            document.onmousemove = function (e) {
                var moveEndX = e.clientX; //鼠标移动结束时，鼠标X坐标
                _moveX = moveEndX - initX; //鼠标在 X 轴上移动的距离

                if (_moveX < 0) _moveX = 0; //当_moveX小于0时
                if (_moveX > 300 - 45) _moveX = 300 - 45;
                domSlide.style.left = _moveX + 'px'; //设置.slide的left值
                domBg.style.width = _moveX + 'px'; //设置绿色背景元素的width值

                //判断滑块有没有到边界
                if (_moveX == 255) { //判断有没有到头
                    domRect.style.color = 'white';
                    domImg.src = 'images/left.png';

                    domTextInfo.innerText = '认证成功！';
                    domRect.style.zIndex = 1000;
                    document.onmousemove = null;
                    domSlide.onmousedown = null;
                }
            }
        }

        document.onmouseup = function () { //鼠标抬起事件
            document.onmousemove = null; //鼠标抬起时，清除鼠标移动事件
            if (_moveX < 255) {
                domBg.style.width = '0px';
                domSlide.style.left = '0px';
            }
        }
    </script>
</body>

</html>